<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<div id="div01">
		<div id="div02">测试1</div>
		<div id="div03">测试1</div>
		<div id="div04">测试1</div>
	</div>
	<ul id="ul01">
		<li>香蕉</li>
		<li>西瓜</li>
		<li>葡萄</li>
		<li>苹果</li>
	</ul>
	<div>
		节点名字：<input type="text" id="txtNodeName" /><br />
		节点类型：<input type="text" id="txtNodeType" /><br />
		节点值：<input type="text" id="txtNodeValue" /><br />
		子节点数量：<input type="text" id="txtQty" /><br />
	</div>
	<button onclick="foo(1)">回到根节点</button>
	<button onclick="foo(2)">得到当前元素的第一个子元素</button>
	<button onclick="foo(3)">得到当前元素的最后一个子元素</button>
	<button onclick="foo(4)">得到当前元素的前一个子元素</button>
	<button onclick="foo(5)">得到当前元素的后一个子元素</button>
	
	
	<script>
		var cur;
		function foo(op)
		{
			if(op==1)
			{
				cur=document.documentElement;
			}
			else if(op==2)
			{
				cur=cur.firstChild;
			}
			else if(op==3)
			{
				cur=cur.lastChild;
			}
			else if(op==4)
			{
				cur=cur.previousElementSibling;
			}
			else if(op==5)
			{
				cur=cur.nextElementSibling;
			}
			else if(op==6)
			{
				cur=cur.parentNode;
			}
			txtNodeName.value=cur.nodeName;
			txtNodeType.value=cur.nodeType;
			txtNodeValue.value=cur.nodeValue;
			txtQty.value=cur.childNodes.length;
		}
	</script>
	
	</body>
</html>
